<template>
  <div class="home">
    <van-sticky>
      <van-search
        v-model="value"
        shape="round"
        background="#0194ff"
        placeholder="输入商家、商品名称"
        disabled
        @click="go"
      />
    </van-sticky>
    <!-- ----- -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in bannerlist" :key="index"
        ><img :src="item.bannerUrl" alt=""
      /></van-swipe-item>
    </van-swipe>
    <!-- ----- -->
    <h2>猜你喜欢</h2>
    <div class="btn-box">
      <div
        v-for="(item, index) in tabs"
        :key="index"
        :class="{ active: currentindex == index }"
        @click="mysort(index)"
      >
        {{ item }}
      </div>
    </div>
    <div class="btn-box1">
      <span>年货节热卖</span>
      <span>津贴联盟</span>
      <span>满减优惠</span>
      <span>品质联盟</span>
    </div>

    <FoodList ref="myref" />
  </div>
</template>

<script>
import { fun_banners, fun_list } from "@/api/index.js";
import FoodList from "@/components/FoodList";
import Vue from "vue";
import { Search } from "vant";
import { Swipe, SwipeItem } from "vant";
import { Sticky } from "vant";

Vue.use(Sticky);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Search);
export default {
  data() {
    return {
      currentindex: 0,
      value: "",
      bannerlist: [],
      tabs: ["综合排序", "距离最近", "销量最高", "筛选"],
    };
  },
  components: {
    FoodList,
  },
  methods: {
    go() {
      this.$router.push("/search");
    },
    mysort(index) {
      this.currentindex = index;
      console.log(this.$refs.myref.lists);
      if (index == 1) {
        this.currentindex = index;
        this.$refs.myref.lists.sort((a, b) => {
          return parseFloat(a.distance) - parseFloat(b.distance);
        });
      } else if (index == 2) {
        this.currentIndex == index;
        this.$refs.myref.lists.sort((a, b) => {
          return (
            b.monthSalesTip.slice(2, b.monthSalesTip.length) -
            a.monthSalesTip.slice(2, a.monthSalesTip.length)
          );
        });
      }
    },
  },

  created() {
    fun_banners().then((res) => {
      this.bannerlist = res.data.list;
      // console.log(this.bannerlist);
    });
  },
};
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 1.1111rem;
  line-height: 8.3333rem;
  text-align: center;
  background-color: #39a9ed;
}
.my-swipe {
  margin: 0.5556rem 1.1111rem;
  height: 5.5556rem;
  border-radius: 0.4444rem;
  img {
    width: 100%;
    height: 100%;
  }
}
h2 {
  padding-left: 1.1111rem;
  font-size: 1rem;
}
.btn-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0.5556rem 1.1111rem;
  font-size: 0.7778rem;
}
.btn-box1 {
  margin: 0.2778rem 1.1111rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.btn-box1 > span {
  font-size: 0.7222rem;
  background-color: rgb(235, 233, 233);
  padding: 0.1667rem 0.2778rem;
  border-radius: 0.2778rem;
}
.active {
  color: red;
  font-weight: bold;
}
</style>



